<template>
	<view class="ts-flex ts-column ts-flex-item">
		<view class="ts-flex ts-row">
			<ts-search-bar></ts-search-bar>
			<!-- #ifdef MP-WEIXIN -->
			<view class="icon" @tap="showRightDrawer">
				<ts-icon type="bars" color="#666666" size="22"></ts-icon>
			</view>
			<!-- #endif -->
		</view>
		<view class="page-content">
			<block v-for="(lab,index) in labs" :key="index">
				<view class="lab-group">{{lab.group}}</view>
				<view class="ts-list">
					<view class="ts-list-cell" hover-class="ts-list-cell-hover" :data-lab="item" v-for="(item,index1) in lab.lists"
					 :key="index1">
						<view class="ts-list-cell-navigate">
							<view class="lab-content">
								<view class="lab-title">{{item.meta.title}}</view>
								<view class="lab-description">{{item.meta.description}}</view>
								<view class="button-row">
									<button class="ts-background-red" size="mini" :data-item="item" v-if="item.demoUrl.length >0 " @tap="showDemo">演示</button>
									<button class="ts-background-green" size="mini" :data-item="item" v-if="item.meta.sourceUrl.length >0 " @tap="showSource">源码</button>
									<button class="ts-background-primary" size="mini" :data-item="item" v-if="item.meta.documentUrl.length >0 "
									 @tap="showDocument">教程</button>
									<button class="ts-background-yellow" size="mini" :data-item="item" v-if="item.meta.resourceUrl.length >0 "
									 @tap="showResource">资源</button>
									<button class="ts-background-purple" size="mini" :data-item="item" v-if="item.meta.videoUrl.length >0 " @tap="showVideo">视频</button>
								</view>
							</view>
						</view>
					</view>
				</view>
			</block>

		</view>
		<ts-drawer :visible="rightDrawerVisible" mode="right" @close="closeRightDrawer">
			<view class="drawer-content">
				<view class="ts-h4 ts-text-bold ts-padding ts-center">实验指南</view>
				<view class="ts-h5">
					实验部分包含“演示”、“源码”、“教程”、“资源”和“视频”5个部分的功能，旨在帮助学生快速掌握ts-app开发的基础知识，完整的系列教程，请阅读慕课部分。
				</view>
				<!-- <button class="button" type="warn" @tap="closeRightDrawer">关闭抽屉式导航</button> -->
			</view>
		</ts-drawer>
	</view>
</template>

<script>
	import tsDrawer from '@/components/teaset/components/ts-drawer.vue';
	import tsIcon from '@/components/teaset/components/ts-icon.vue';
	import tsSearchBar from '@/components/teaset/components/ts-search-bar.vue';
	export default {
		components: {
			tsDrawer,
			tsIcon,
			tsSearchBar,
		},
		data() {
			return {
				rightDrawerVisible: false,
				labs: [{
						group: '模版页面',
						lists: [{
							demoUrl: 'teaset/templates/map',
							meta: {
								title: '活动安排模版页面',
								description: '演示Teaset基础组件、segment-control、背景图片、map组件用法',
								documentUrl: '',
								sourceUrl: '',
								resourceUrl: '',
								videoUrl: ''
							}
						}, {
							demoUrl: 'teaset/templates/member-jixiao',
							meta: {
								title: '会员绩效模版页面',
								description: '演示Teaset基础组件、echart组件用法',
								documentUrl: '',
								sourceUrl: '',
								resourceUrl: '',
								videoUrl: ''
							}
						}, {
							demoUrl: 'teaset/templates/lost-found/index',
							meta: {
								title: '失物招领完整案例',
								description: '演示Teaset组件用法。Mockjs数据源',
								documentUrl: '',
								sourceUrl: '',
								resourceUrl: '',
								videoUrl: ''
							}
						}]
					},
					{
						group: 'Teaset组件',
						lists: [{
								demoUrl: 'teaset/components/basic',
								meta: {
									title: '基础组件',
									description: 'Teaset基础组件用法示例。',
									documentUrl: '',
									sourceUrl: '',
									resourceUrl: '',
									videoUrl: ''
								}
							}, {
								demoUrl: 'teaset/components/city-picker',
								meta: {
									title: '城市选择窗口',
									description: '城市选择窗口。',
									documentUrl: '',
									sourceUrl: '',
									resourceUrl: '',
									videoUrl: ''
								}
							}, {
								demoUrl: 'teaset/components/timeline',
								meta: {
									title: '时间线',
									description: '使用时间线展示Teaset组件库发展历程。',
									documentUrl: '',
									sourceUrl: '',
									resourceUrl: '',
									videoUrl: ''
								}
							},
							{
								demoUrl: 'teaset/components/popup-ad',
								meta: {
									title: '弹出广告',
									description: '弹出广告组件，支持定义关闭图标，支持关闭事件的处理，演示v-model实现属性的双向绑定的技术。',
									documentUrl: '',
									sourceUrl: '',
									resourceUrl: '',
									videoUrl: ''
								}
							}, {
								demoUrl: 'teaset/components/popup',
								meta: {
									title: '底部弹出窗口',
									description: '底部弹出窗口，用于构造购物车、分享菜单等底部弹出选项。',
									documentUrl: '',
									sourceUrl: '',
									resourceUrl: '',
									videoUrl: ''
								}
							},
							{
								demoUrl: 'teaset/components/drawer',
								meta: {
									title: '抽屉菜单',
									description: '兼容小程序和H5APP的抽屉样式菜单',
									documentUrl: '',
									sourceUrl: '',
									resourceUrl: '',
									videoUrl: ''
								}
							}, {
								demoUrl: 'teaset/components/left-category',
								meta: {
									title: '左侧导航菜单',
									description: '左侧导航菜单',
									documentUrl: '',
									sourceUrl: '',
									resourceUrl: '',
									videoUrl: ''
								}
							},
							{
								demoUrl: 'teaset/components/segmented-control',
								meta: {
									title: '分段导航',
									description: '分段导航，商品列表，上拉加载综合案例',
									documentUrl: '',
									sourceUrl: '',
									resourceUrl: '',
									videoUrl: ''
								}
							},
							{
								demoUrl: 'teaset/components/load-more',
								meta: {
									title: 'Load more效果',
									description: '这是load-more组件使用示例，配置loadingType改变组件状态，配置contentText改变文字内容，配置showImage改变loading时是否显示loading图标，配置color改变文字和loading图标颜色。',
									documentUrl: '',
									sourceUrl: '',
									resourceUrl: '',
									videoUrl: ''
								}
							}, {
								demoUrl: 'teaset/components/load-more-product-list',
								meta: {
									title: 'Load more 高级案例',
									description: '使用load-more组件实现的上拉加载更多商品列表的例子',
									documentUrl: '',
									sourceUrl: '',
									resourceUrl: '',
									videoUrl: ''
								}
							}
						]
					}
				],
			}
		},
		methods: {
			closeRightDrawer() {
				this.rightDrawerVisible = false;
			},
			showRightDrawer() {
				this.rightDrawerVisible = true;
			},
			showDemo(e) {
				const item = e.target.dataset.item;
				const demoUrl = item.demoUrl;
				if (demoUrl) {
					uni.navigateTo({
						url: demoUrl
					});
				}
			},
			showDocument(e) {
				const item = e.target.dataset.item;
				const documentUrl = item.meta.documentUrl;
				const title = item.meta.title;
				if (documentUrl) {
					const url = `/pages/reader?document=${documentUrl}&title=${title}`;
					uni.navigateTo({
						url: url
					});
				}
			},
			showSource(e) {
				const item = e.target.dataset.item;
				const documentUrl = item.meta.sourceUrl;
				const title = item.meta.title;
				if (documentUrl) {
					const url = `/pages/reader?document=${documentUrl}&title=${title}`;
					uni.navigateTo({
						url: url
					});
				}
			},
			showResource(e) {
				const item = e.target.dataset.item;
				const documentUrl = item.meta.resourceUrl;
				const title = item.meta.title;
				if (documentUrl) {
					const url = `/pages/reader?document=${documentUrl}&title=${title}`;
					uni.navigateTo({
						url: url
					});
				}
			},
			showVideo(e) {
				const item = e.target.dataset.item;
				const videoUrl = item.meta.videoUrl;
				const title = item.meta.title;
				if (videoUrl) {
					const url = `/pages/video?url=${videoUrl}&title=${title}`;
					uni.navigateTo({
						url: url
					});
				}
			},
		},
		onNavigationBarButtonTap(e) {
			this.rightDrawerVisible = !this.rightDrawerVisible
		}
	}
</script>

<style>
	page view {
		display: flex;
		flex-direction: column;
	}

	.icon {
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-right: 10upx;
	}

	.page-content {
		font-size: 30upx;
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.ts-list {
		margin-top: 0upx;
	}

	.drawer-content {
		display: flex;
		flex-direction: column;
		padding: 30upx;
	}

	.lab-group {
		padding: 20upx;
		font-size: 36upx;
		font-weight: bold;
		background-color: #000000;
		color: #FFFFFF;
	}

	.lab-title {
		padding: 20upx 0upx;
		font-size: 30upx;
		font-weight: bold;
	}

	.lab-content {
		font-size: 25upx;
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.lab-description {
		padding-bottom: 20upx;
	}

	.button-row {
		border-top: #cccccc solid 1upx;
		display: flex;
		flex: 1;
		flex-direction: row;
	}

	.button-row button {
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: center;
		border-radius: 0;
		color: #ffffff;
	}
</style>
